<template>
    <div>
        <i-table  border :columns="columnsTable" :data="dataList">
            <template slot-scope="{ row }" slot="action">
                <div class="action-button">
                    <Button v-if="row.type==='0'" type="primary" size="small" style="margin-right: 5px" @click="toEdit(row.id)">编辑</Button>
                    <Button v-if="row.type==='0'" type="error" size="small" style="margin-right: 5px" @click="deleteDataModal(row.id)">删除</Button>
                    <Button type="success" size="small" @click="toDetail(row.id)">详情</Button>
                </div>
            </template>
        </i-table>
        <Page :total="pageInfo.total" :current="pageInfo.pageNo" @on-change="changePage"></Page>
        <Modal
                v-model="modal"
                title="确认操作"
                width="20"
                @on-ok="deleteData"
        >
            <div style="text-align:center">
                <p>是否确认删除!</p>
            </div>
        </Modal>
    </div>
</template>

<script>
import { findPageList, deleteRequest } from '@/api/outbreak-management/government-Informationization-project/operation-and-maintenance-project'
export default {
  data () {
    return {
      // 弹出窗控制
      modal: false,
      // 删除 id
      currentDelId: '',
      columnsTable: [
        // {
        //   title: '上报日期',
        //   minWidth: 120,
        //   key: 'sbrq'
        // },
        {
          title: '项目名称',
          minWidth: 120,
          key: 'xmmc'
        },
        {
          title: '项目类型',
          minWidth: 120,
          key: 'xm_type',
          render: (h, params) => {
            let xm_type = ''
            if (params.row.xm_type)xm_type = JSON.parse(params.row.xm_type)
            xm_type = xm_type && Array.isArray(xm_type) ? xm_type.join('，') : ''
            return h('div', [
              h('Tooltip', {
                props: { placement: 'top', transfer: true }
              }, [
                h('span', {
                  style: {
                    display: 'inline-block',
                    width: params.column._width * 0.9 + 'px',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  }
                }, xm_type),
                h('span', {
                  slot: 'content',
                  style: { whiteSpace: 'normal', wordBreak: 'break-all' }
                }, xm_type)
              ])
            ])
          }
        },
        {
          title: '预算金额',
          minWidth: 120,
          key: 'ysje'
        },
        {
          title: '拦标价金额',
          minWidth: 120,
          key: 'lbjjr'
        },
        {
          title: '实际投资额',
          minWidth: 120,
          key: 'sjtze'
        },
        {
          title: '预算下达年度',
          minWidth: 120,
          key: 'ysxdnd'
        },
        {
          title: '使用单位/部门',
          minWidth: 120,
          key: 'sydw'
          // render: (h, params) => {
          //   let sydw = ''
          //   if (params.row.sydw)sydw = JSON.parse(params.row.sydw)
          //   sydw = sydw && Array.isArray(sydw) ? sydw.join('/') : ''
          //   return h('div', [
          //     h('Tooltip', {
          //       props: { placement: 'top', transfer: true }
          //     }, [
          //       h('span', {
          //         style: {
          //           display: 'inline-block',
          //           width: params.column._width * 0.9 + 'px',
          //           overflow: 'hidden',
          //           textOverflow: 'ellipsis',
          //           whiteSpace: 'nowrap'
          //         }
          //       }, sydw),
          //       h('span', {
          //         slot: 'content',
          //         style: { whiteSpace: 'normal', wordBreak: 'break-all' }
          //       }, sydw)
          //     ])
          //   ])
          // }
        },
        {
          title: '是否招标',
          minWidth: 140,
          key: 'zb_type'
        },
        {
          title: '运维内容',
          minWidth: 140,
          key: 'ywnrjs',
          render: (h, params) => {
            return h('div', [
              h('Tooltip', {
                props: { placement: 'top', transfer: true }
              }, [
                h('span', {
                  style: {
                    display: 'inline-block',
                    width: params.column._width * 0.9 + 'px',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  }
                }, params.row.ywnrjs),
                h('span', {
                  slot: 'content',
                  style: { whiteSpace: 'normal', wordBreak: 'break-all' }
                }, params.row.ywnrjs)
              ])
            ])
          }
        },
        {
          title: '填报单位',
          minWidth: 140,
          key: 'company_name'
        },
        {
          title: '审核状态',
          minWidth: 120,
          key: 'type',
          render: (h, params) => {
            let date = '未知状态'
            if (params.row.type === '0') {
              date = '未提报'
            } else if (params.row.type === '1') {
              date = '部门已审核'
            }
            return h('div', date)
          }
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          minWidth: 180,
          align: 'center'
        }
      ],
      dataList: [
      ],
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    toDetail (id) {
      this.$router.push({ name: 'operation-and-maintenance-project-add', query: { id: id, showDetail: true } })
    },
    toEdit (id) {
      this.$router.push({ name: 'operation-and-maintenance-project-add', query: { id: id } })
    },
    deleteData () {
      deleteRequest({ id: this.currentDelId }).then(({ data }) => {
        let { errcode } = data
        if (errcode === 0) {
          this.$Message.success('删除成功!')
          this.currentDelId = ''
          this.getTableData()
        } else {
          this.$Message.warning('删除失败!')
        }
      })
    },
    deleteDataModal (id) {
      this.currentDelId = id
      this.modal = true
    },
    changePage (index) {
      this.pageInfo.pageNo = index
      this.getTableData()
    },
    getTableData () {
      findPageList(this.pageInfo).then(({ data }) => {
        let { data: res } = data
        this.dataList = res.results
        this.pageInfo.total = res.totalRecord
      })
    }
  },
  created () {
    console.log(this.$route.name)
    this.getTableData()
  }
}
</script>
<style scoped>
</style>
